<template>
    <div class="p-4">
      <!-- 添加内边距 -->
      <!-- 询价清单及要求 -->
      <div>
        <div class="basic">
          <span>询价清单及要求</span>
          <!-- 标题 -->
        </div>
  
        <!-- Element UI 表单 -->
        <el-form
          ref="formRel"
          :model="enquiryForm"
          label-width="150px"
          style="max-width: 1000px; margin-top: 20px"
        >
          <!-- 表单项行 -->
          <el-row>
            <!-- 表单项列 -->
            <el-col :span="12">
              <el-form-item label="询价日期:">
                <el-input :disabled="true" v-model="enquiryForm.enquiryDate" />
                <!-- 绑定询价日期 -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="货物种类:">
                <el-input :disabled="true" v-model="enquiryForm.type" />
                <!-- 绑定货物种类 -->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 更多表单项 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="运输方式:">
                <el-input :disabled="true" v-model="enquiryForm.transportway" />
                <!-- 绑定运输方式 -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="航线选择:">
                <el-input :disabled="true" v-model="enquiryForm.airline" />
                <!-- 绑定航线选择 -->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 更多表单项 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="起运港:">
                <el-input :disabled="true" v-model="enquiryForm.start" />
                <!-- 绑定起运港 -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目的港:">
                <el-input :disabled="true" v-model="enquiryForm.end" />
                <!-- 绑定目的港 -->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 更多表单项 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="报价条款:">
                <el-input
                  :disabled="true"
                  v-model="enquiryForm.quotationClause"
                />
                <!-- 绑定报价条款 -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="货物描述:">
                <el-input :disabled="true" v-model="enquiryForm.note" />
                <!-- 绑定货物描述 -->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 更多表单项 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="HS编码:">
                <el-input :disabled="true" v-model="enquiryForm.hscode" />
                <!-- 绑定HS编码 -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="柜型选择:">
                <el-input :disabled="true" v-model="enquiryForm.cabinetType" />
                <!-- 绑定柜型选择 -->
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
  
      <!-- 产品信息 -->
      <div class="basic">
        <span>产品信息</span>
        <!-- 标题 -->
  
        <!-- Element UI 表格 -->
        <el-table :data="tableData" style="width: 100%" stripe border>
          <!-- 表格列 -->
          <el-table-column
            prop="code"
            label="产品编号"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="name"
            label="产品名称"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="num"
            label="总件数"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="weight"
            label="总毛重 (kg)"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="volume"
            label="总体积(CBM)"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="tornu"
            label="总托数"
            header-align="center"
            align="center"
          />
        </el-table>
  
        <!-- 总计信息 -->
        <el-row class="basic">
          <el-col :span="6">
            <el-form-item label="总件数:">
              <span>{{ totalQuantity }}</span>
              <!-- 显示总计件数 -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总毛重 (kg):">
              <span>{{ grossWeight }}</span>
              <!-- 显示总毛重 -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总体积(CBM):">
              <span>{{ totalVolume }}</span>
              <!-- 显示总体积 -->
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="总托数:">
              <span>{{ totalPallets }}</span>
              <!-- 显示总托数 -->
            </el-form-item>
          </el-col>
        </el-row>
      </div>
  
      <!-- 报价信息 -->
      <div class="basic">
        <span>报价信息</span>
        <!-- 标题 -->
  
        <!-- 报价信息表单 -->
        <el-form
          ref="formRel"
          :model="offerForm"
          label-width="150px"
          style="max-width: 1000px; margin-top: 20px"
        >
          <!-- 表单项 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="报价条款:">
                <!-- 下拉选择框 -->
                <el-select
                  :disabled="!isEditable"
                  v-model="offerForm.quotationClause"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in clause"
                    :key="item.dictValue"
                    :label="item.dictName"
                    :value="item.dictValue"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="RMB费用:">
                <el-input :disabled="!isEditable" v-model="offerForm.rmb" />
                <!-- 绑定RMB费用 -->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 更多表单项 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="海运费USD:">
                <el-input :disabled="!isEditable" v-model="offerForm.usd" />
                <!-- 绑定海运费USD -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目的港费用合计:">
                <el-input
                  :disabled="!isEditable"
                  v-model="offerForm.targetMoney"
                />
                <!-- 绑定目的港费用合计 -->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 更多表单项 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="报价有效期:">
                <el-date-picker
                  :disabled="!isEditable"
                  v-model="offerForm.validTime"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="请选择报价有效期"
                />
                <!-- 绑定报价有效期 -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="海运费合计:">
                <el-input :disabled="!isEditable" v-model="offerForm.totals" />
                <!-- 绑定海运费合计 -->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 更多表单项 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="船公司:">
                <el-input
                  :disabled="!isEditable"
                  v-model="offerForm.boatCompany"
                />
                <!-- 绑定船公司 -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="报价有效期:">
                <el-date-picker
                  :disabled="!isEditable"
                  v-model="offerForm.validTime"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  type="date"
                  placeholder="请选择报价有效期"
                />
                <!-- 绑定报价有效期 -->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 更多表单项 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="航次:">
                <el-input :disabled="!isEditable" v-model="offerForm.voyage" />
                <!-- 绑定航次 -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="航程:">
                <el-input :disabled="!isEditable" v-model="offerForm.range" />
                <!-- 绑定航程 -->
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 更多表单项 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="上传截图:">
                <el-upload
                  :disabled="!isEditable"
                  v-model:file-list="picList"
                  :action="host + '/v1/upload/img'"
                  list-type="picture-card"
                  :before-upload="beforeAvatarUpload"
                  :on-success="handleBannerSuccess"
                  :on-remove="handleRemove"
                >
                  <el-icon><Plus /></el-icon>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
  
        <!-- 提交按钮 -->
        <el-button type="primary" style="margin-left: 20px" @click="submitOffer"
          >提交报价</el-button
        >
  
        <!-- 取消按钮 -->
        <el-button @click="cancelOffer">取消</el-button>
      </div>
    </div>
  </template>
  <script setup>
  import { ref, reactive, computed, onBeforeMount } from "vue"; // 导入Vue Composition API
  import { useRoute, useRouter } from "vue-router"; // 导入用于获取路由参数的Hook
  import { queryDict } from "@/api/dict.js"; // 导入获取字典数据的API方法
  import host from "@/utils/env.js";
  import { Plus } from "@element-plus/icons-vue";
  import { ElMessage } from "element-plus";
  
  const route = useRoute(); // 获取当前路由的信息
  const router = useRouter(); // 获取路由实例
  
  const tableData = ref([]); // 初始化一个响应式的数组，用于存储产品信息
  
  // 报价条款数据列表
  const clause = ref([]);
  
  const isEditable = ref(true);
  
  const picList = ref([]);
  
  // 初始化询价表单数据对象
  const enquiryForm = reactive({
    enquiryDate: "", // 询价日期
    type: "", // 货物种类
    transportway: "", // 运输方式
    airline: null, // 航线选择
    start: "", // 起运港
    end: null, // 目的港
    quotationClause: null, // 报价条款
    note: "", // 货物描述
    hscode: null, // HS编码
    cabinetType: null // 柜型选择
  });
  
  // 初始化报价表单数据对象
  const offerForm = reactive({
    quotationClause: "", // 报价条款
    validTime: "", // 报价有效期
    rmb: "", // RMB费用
    usd: "", // 海运费USD
    targetMoney: "", // 目的港费用合计
    totals: "", // 海运费合计
    boatCompany: "", // 船公司
    voyage: "", // 航次
    range: "", // 航程
    picurl: [] // 图片地址
  });
  
  // 计算总件数
  const totalQuantity = computed(() =>
    tableData.value.reduce((acc, item) => acc + item.num, 0)
  );
  // 计算总毛重
  const grossWeight = computed(() =>
    tableData.value.reduce((acc, item) => acc + item.weight, 0)
  );
  // 计算总体积
  const totalVolume = computed(() =>
    tableData.value.reduce((acc, item) => acc + item.volume, 0)
  );
  // 计算总托数
  const totalPallets = computed(() =>
    tableData.value.reduce((acc, item) => acc + item.tornu, 0)
  );
  
  // 获取报价条款数据
  async function getClause() {
    const res = await queryDict("quotationClause");
    if (res.code == 200) {
      clause.value = res.data;
    }
  }
  
  // 提交报价信息
  async function submitOffer() {
    let data = {
      hid: route.query.cid,
      quotationClause: offerForm.quotationClause,
      rmb: offerForm.rmb,
      usd: offerForm.usd,
      targetMoney: offerForm.targetMoney,
      validTime: offerForm.validTime,
      totals: offerForm.totals,
      boatCompany: offerForm.boatCompany,
      voyage: offerForm.voyage,
      range: offerForm.range,
      picurl: ""
    };
    /**
     * 文件上传前的限制
     * @param rawFile
     */
    const beforeAvatarUpload = rawFile => {
      if (rawFile.type !== "image/jpeg" && rawFile.type !== "image/png") {
        ElMessage.error("请上传jpg、png格式的文件");
        return false;
      } else if (rawFile.size / 1024 / 1024 > 2) {
        ElMessage.error("图片不能超过2MB!");
        return false;
      }
      return true;
    };
    //轮播图上传成功
  
    const handleBannerSuccess = (response, uploadFile) => {
      if (response.code == 200) {
        //上传成功
        offerForm.value.picurl.push(response.data);
      }
    };
    //删除图片
    const handleRemove = (uploadFile, uploadFiles) => {
      //获取删除的图片路径
      let path = uploadFile.response.data;
      //如果是服务器存在的图片 发送异步请求到后台删除
      //在banner中查找
      let pos = data.value.banner.indexOf(path);
      data.value.banner.splice(pos, 1);
    };
  
    if (route.query.status == 1) {
      let res = await saveOffer(data);
      if (res.code == 200) {
        // 提示信息
        ElMessage.success("报价成功");
        // 跳转至询价列表页面
        router.push({
          path: "/forwarder/index"
        });
  
        emits("refresh");
        cls();
      }
    } else if (route.query.status == 2) {
      let res = await updateOffer(data);
      if (res.code == 200) {
        // 提示信息
        ElMessage.success("修改成功");
        // 跳转至询价列表页面
        router.push({
          path: "/forwarder/index"
        });
        emits("refresh");
        cls();
      }
    }
  }
  
  async function getOffers() {
    const res = await getOffer(route.query.cid);
  
    
    if (res.code == 200) {
      // 更新报价表单数据
      Object.assign(offerForm, {
        quotationClause: res.data.quotationClause,
        validTime: res.data.validTime,
        rmb: res.data.rmb,
        usd: res.data.usd,
        targetMoney: res.data.targetMoney,
        totals: res.data.totals,
        boatCompany: res.data.boatCompany,
        voyage: res.data.voyage,
        range: res.data.range,
        picurl: res.data.picurl
      });
    }
  }
  
  // 初始化数据
  async function init() {
    // 构造请求参数
    const data = { eid: route.query.cid, userId: "" };
    // 发送请求获取询价信息
    const res = await getEnquiry(data);
  
    // 如果请求成功并且有返回的数据
    if (res.code === 200 && res.data.enquiryDetails) {
      // 更新产品信息数组
      tableData.value = res.data.enquiryDetails;
  
      // 更新询价表单数据
      Object.assign(enquiryForm, {
        enquiryDate: res.data.enquiryDate,
        type: res.data.type,
        transportway: res.data.transportway,
        airline: res.data.airline,
        start: res.data.start,
        end: res.data.end,
        quotationClause: res.data.quotationClause,
        note: res.data.note,
        hscode: res.data.hscode,
        cabinetType: res.data.cabinetType
      });
    }
  }
  
  // 在组件挂载之前执行初始化函数
  onBeforeMount(() => {
    init();
    getClause();
  
    if (route.query.status == 2) {
      getOffers();
    }
  
    if (route.query.status == 3) {
      isEditable.value = false;
    }
  
    
  });
  </script>
  
  <style scoped>
  
  </style>
  